<!-- components/AssignmentSubmissionDialog.vue -->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="作业提交列表"
    width="70%"
    :before-close="handleClose"
    class="submission-dialog"
  >
    <el-table
      :data="submissions"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      border
      stripe>
      <el-table-column prop="student_id" label="学号" width="120"></el-table-column>
      <el-table-column prop="student_name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="成绩" width="120">
        <template #default="{ row }">
          <span>{{ row.grade !== null ? row.grade : '未评分' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleGrade(row.submission_id)"
            :disabled="row.status !== 'SUBMITTED' || row.grade !== null"
          >
            批改
          </el-button>
          <el-button
            type="info"
            size="small"
            @click="handleViewSubmission(row.submission_id)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  submissions: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'close', 'grade'])

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const getStatusType = (status) => {
  const types = {
    'SUBMITTED': 'success',
    'NOT_SUBMITTED': 'warning',
    'GRADED': 'info'
  }
  return types[status] || 'info'
}

const getStatusText = (row) => {
  const texts = {
    'SUBMITTED': '已提交',
    'NOT_SUBMITTED': '未提交',
    'GRADED': '已批改'
  }
  return texts[row.status] || '未知状态'
}

const handleClose = () => {
  emit('close')
}

const handleGrade = (submissionId) => {
  emit('grade', submissionId)
}

const handleViewSubmission = (submissionId) => {
  // TODO: Implement view submission functionality
  console.log('View submission:', submissionId)
}
</script>

<style scoped>
.submission-dialog {
  .el-dialog__body {
    padding: 20px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.el-table {
  margin-bottom: 20px;
}
</style>